<template>
	<view class="container" :style="{width: 100%;height: windowHeight + 'px'}">
		<camera 
			mode="normal" 
			device-position="front" 
			flash="off"  
			:style="{width: 100%;height:cameraHeight + 'px'}"
			>
			<cover-image class="controls take-video-back-img" src="https://img-blog.csdnimg.cn/20210126152753150.png"/>
		</camera>
		<view class="bottom">
			<view class="wrap">
				<view class="back" @click="backTwoStep">
					<image class="icon-w55-h49" :src="backIcon"></image>
				</view>
				<view class="take" @click="takeVideo">
					<image class="icon-w100-h100" :src="takeBtnIcon"></image>
				</view>
				<view class="switch" @click="switchCamera">
					<image class="icon-w69-h56" :src="switchCameraIcon"></image>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	    export default {
	        data: {
	            fil: true,
				imgList:[""],
				statusBar:'',
				CustomBar: 0
	        },
			onLoad(){
				
				// this.startPreview()
			},
	        onReady() {
	        
				var that = this
				
	        },
	        methods: {
				
			}
	    }
</script>

<style>
	.custom{
		background-color: #2C65F7;
	}
	.navcontent{
		height: 45px;
		display: -ms-flex;
		display: -webkit-flex;
		display: flex;
		justify-content:space-around;
		flex-direction:row;
		color:#FFFFFF;
	}
	.livePusher{
		width: 350px;
		height: 350px;
	}
	.livefater{
		display: -ms-flex;
		display: -webkit-flex;
		display: flex;
		justify-content:center;
		flex-direction:column;
		align-items:center;
		margin-top: 50rpx;
		margin-bottom: 50rpx;
		height: 350px;
	}
	.gaiimg{
		width: 350px;
		height: 350px;
		margin-top: -350px;
	}
</style>